<template>
  <div>
    <button type="button" v-on:click="exportPdf()">下载</button>
    <ReportViewer ref="reportViewer" language="zh" />
  </div>
</template>

<script>
  import { Viewer } from '@grapecity/activereports-vue'
  import '@grapecity/activereports-localization'
  import '@grapecity/activereports-localization/dist/designer/ja-locale'
  import '@grapecity/activereports-localization/dist/designer/zh-locale'
  import '@grapecity/activereports-localization/dist/ar-js-locales'
  import '@grapecity/activereports/pdfexport'
  import '@grapecity/activereports/htmlexport'
  import '@grapecity/activereports/xlsxexport'
  import { Core } from '@grapecity/activereports'
  let viewer = null
  export default {
    name: 'DesignerHost',
    components: {
      ReportViewer: Viewer,
    },
    data: function () {
      return {}
    },
    methods: {
      exportPdf() {
        var settings = { title: 'test', userPassword: '' }
        var cancelCallback = function () {
          return false
        }
        viewer
          .export('pdf', settings, { cancel: cancelCallback })
          .then((result) => result.download('Exported_PDF'))
      },
    },
    mounted: function () {
      viewer = this.$refs.reportViewer.Viewer()
      viewer.open('../template/Chinese.rdlx-json')
    },
  }
  Core.FontStore.registerFonts('../fonts/fontConfig.json')
</script>

<style scoped>
  #designer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
  #viewer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>
